<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2.5">
<title>计时器</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: '微软雅黑', sans-serif;
  }
  #container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
  #countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .digit {
    width: 50px;
    height: 70px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 52px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 5px;
    color: #fff;
  }
  .separator {
    font-size: 36px;
    margin: 0 10px;
    color: #000;
  }
  #date {
    color: #000;
    font-size: 18px;
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
  #progressBar {
    width: 100%;
    height: 20px;
    background-color: gray;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
	position: relative
  }
  #progressBarFill {
    width: 0%;
    height: 100%;
    background-color: red;
    transition: width 1s;
  }
  #progressBarPercent {
    position: absolute;
    width: 100%;
    text-align: center;
    font-style: italic;
    color: white;
    top: 50%;
    margin-top: -12px; /* 适应进度条高度 */
  }
  #hitokoto-container {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px; 
  }
  #hitokoto {
    font-style: italic; 
    text-align: right;
	font-size: 16px;
    margin-top: 5px; 
  }
  .clickable {
    position: relative;
    overflow: hidden;
  }
  .clickable:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.1s ease-out, opacity 0.01s ease-out;
  }
  .clickable.clicked:after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  #weather-container {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px; 
  }
</style>
</head>
<body>
<div id="container">
  <div id="countdown">
    <div class="digit" id="hourTens"></div>
    <div class="digit" id="hourOnes"></div>
    <div class="separator">:</div>
    <div class="digit" id="minuteTens"></div>
    <div class="digit" id="minuteOnes"></div>
    <div class="separator">:</div>
    <div class="digit" id="secondTens"></div>
    <div class="digit" id="secondOnes"></div>
  </div>
    <div id="date"></div>
    <div id="progressBar">
    <div id="progressBarFill"></div>
    <div id="progressBarPercent">0%</div>
  </div>
  <div id="hitokoto-container" class="clickable">
    <div id="hitokoto"></div>
  </div>
  <div id="weather-container">
    <div id="weather-info"></div>
  </div>
</div>
<script>
  // 更新时间函数
  function updateTime() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    var hourTens = Math.floor(hours / 10);
    var hourOnes = hours % 10;
    var minuteTens = Math.floor(minutes / 10);
    var minuteOnes = minutes % 10;
    var secondTens = Math.floor(seconds / 10);
    var secondOnes = seconds % 10;

    document.getElementById('hourTens').textContent = hourTens;
    document.getElementById('hourOnes').textContent = hourOnes;
    document.getElementById('minuteTens').textContent = minuteTens;
    document.getElementById('minuteOnes').textContent = minuteOnes;
    document.getElementById('secondTens').textContent = secondTens;
    document.getElementById('secondOnes').textContent = secondOnes;

    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var weekday = now.getDay();
    var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
    var weekCount = getWeekCount(now);
    var dateString = `开学第${weekCount}周，${year}年${month}月${day}日，星期${weekdays[weekday]}`;
    document.getElementById('date').textContent = dateString;
	
  }

  // 获取周数函数
  function getWeekCount(date) {
    var startDate = new Date(2024, 1, 26); // 2024年2月26日
    var timeDiff = date - startDate;
    var diffDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
    var weekCount = Math.floor(diffDays / 7) + 1;
    return numToChinese(weekCount);
  }

  // 数字转中文函数
  function numToChinese(num) {
    var chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    if (num < 10) {
      return chineseNums[num];
    } else {
      var str = '';
      while (num > 0) {
        str = chineseNums[num % 10] + str;
        num = Math.floor(num / 10);
      }
      return str;
    }
  }

  function updateProgressBar() {
    var now = new Date();
    var startHour = 19; 
    var endHour = 21;
    var start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHour, 40, 0);
    var end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHour, 30, 0);
    var totalDuration = (end - start) / 1000; // 总时长，单位秒
    var currentProgress = (end - now) / 1000; // 剩余时长，单位秒
    if (now >= start && now <= end) {
      document.getElementById('progressBar').style.display = 'block';
      var progressPercentage = (currentProgress / totalDuration) * 100;
      document.getElementById('progressBarFill').style.width = progressPercentage + '%';
      document.getElementById('progressBarPercent').textContent = '晚自习剩余' + (progressPercentage.toFixed(2)) + '%';
    } else {
      document.getElementById('progressBar').style.display = 'none';
    }
  }

function typeWriter(hitokotoElement, text, speed) {
  let index = 0;
  function type() {
    if (index < text.length) {
      hitokotoElement.innerHTML += text.charAt(index);
      index++;
      setTimeout(type, speed);
    }
  }
  type();
}

document.getElementById('hitokoto-container').addEventListener('click', function() {
  this.classList.add('clicked'); // 添加点击效果
  setTimeout(() => this.classList.remove('clicked'), 500); // 移除点击效果
  fetchHitokoto(); // 重新获取一言API的内容
});

function fetchHitokoto() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  // 检查当前时间是否在早晨06:00到07:31或下午13:30到14:30之间
  if ((hour >= 6 && hour < 7) || (hour === 12 && minute >= 30 && minute < 60) || (hour === 13 && minute < 30)) {
    // 显示固定的文案
    document.getElementById('hitokoto').textContent = '落座无言行三载，执笔无悔笑苍生。';
  } else {
    // 正常调用一言API
    fetch('https://v1.hitokoto.cn/')
      .then(response => response.json())
      .then(data => {
        var hitokotoElement = document.getElementById('hitokoto');
        hitokotoElement.textContent = ''; // 清空之前的文案
        var speed = 55; // 打字速度，数值越小打字越快
        typeWriter(hitokotoElement, data.hitokoto + ' ——「' + data.from + '」', speed);
      })
      .catch(error => {
        console.error('无法连接到文案服务:', error);
      });
  }
}
// 每隔5分钟更新一言
setInterval(fetchHitokoto, 1 * 60 * 1000);
// 初始调用一言API或显示固定文案
fetchHitokoto();

function fetchWeather() {
  fetch('https://devapi.qweather.com/v7/weather/now?location=101170202&key=49602df8925345398dc3b3ff158a7493')
    .then(response => response.json())
    .then(data => {
      if (data.code === "200") {
        var weatherInfo = data.now;
        var weatherText = `惠农区当前天气 | ${weatherInfo.text} ${weatherInfo.temp}℃ | 体感温度 ${weatherInfo.feelsLike}℃ | ${weatherInfo.windDir} ${weatherInfo.windScale}级 | 大气压${weatherInfo.pressure}hPa`;
        document.getElementById('weather-info').textContent = weatherText;
      }
    })
    .catch(error => {
      console.error('无法连接到天气服务:', error);
    });
}

// 初始调用天气API
fetchWeather();
// 每隔一段时间更新天气信息（例如，每30分钟）
setInterval(fetchWeather, 20 * 60 * 1000);

  // 更新时间
  setInterval(function() {
    updateTime();
    updateProgressBar();
  }, 1); // 每秒更新一次
  // 初始更新
  updateTime();
  updateProgressBar();
</script>

</body>
</html>